<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :model="form" :label-width="80" :rules="rule" inline>
          <FormItem label="用户名">
            <Input v-model="form.userName" placeholder="请输入用户名"></Input>
          </FormItem>
          <FormItem label="真实姓名">
            <Input v-model="form.realName" placeholder="请输入真实姓名"></Input>
          </FormItem>
          <FormItem label="用户状态">
            <Select v-model="form.state" style="width: 200px">
              <Option value="">全部</Option>
              <Option value="1">正常</Option>
              <Option value="2">禁用</Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">搜索</Button>
          </FormItem>
          <FormItem>
            <Button type="success" @click="add()">添加</Button>
          </FormItem>
        </Form>
      </Col>
      <Col :span="24">
        <div class="table-container">
          <Table border :max-height="800" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据"></Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="PageChange"></Page>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowAdd" title="添加用户" @on-ok="submitAdd">
      <Form ref="form" :model="addRow" :label-width="120">
        <FormItem label="用户名">
          <Input v-model="addRow.userName"></Input>
        </FormItem>
        <FormItem label="用户真实姓名">
          <Input v-model="addRow.userRealname"></Input>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="addRow.userPhone"></Input>
        </FormItem>
        <FormItem label="用户密码">
          <Input v-model="addRow.userEncryption"></Input>
        </FormItem>
        <FormItem label="用户地址">
          <Input v-model="addRow.userAddress"></Input>
        </FormItem>
        <FormItem label="用户身份证号">
          <Input v-model="addRow.userIdentity"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="isShowUpdate" title="修改用户" @on-ok="submitUpdate">
      <Form ref="form" :model="updateRow" :label-width="120">
        <FormItem label="用户真实姓名">
          <Input v-model="updateRow.userRealname"></Input>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="updateRow.userPhone"></Input>
        </FormItem>
        <FormItem label="用户地址">
          <Input v-model="updateRow.userAddress"></Input>
        </FormItem>
        <FormItem label="用户身份证号">
          <Input v-model="updateRow.userIdentity"></Input>
        </FormItem>
        <FormItem label="用户备注">
          <Input v-model="updateRow.userRemark"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      form: {
        userName: '',
        realName: '',
        state: '',
        startTime: '',
        endTime: '',
      },
      pageNum: 0,
      pageSize: 10,
      total: 0,
      tableData: [],
      rule: {},
      isShowAdd: false,
      isShowUpdate: false,
      addRow: {userName: '', userRealname: '', userPhone: '', userEncryption: '', userAddress: '', userIdentity: ''},
      updateRow: {}
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    getCols() {
      let that = this;
      return [
        {title: '用户名', key: 'userName', tooltip: true, align: 'center'},
        {title: '真实名字', key: 'userRealname', tooltip: true, align: 'center'},
        {title: '手机号', key: 'userPhone', tooltip: true, align: 'center'},
        {title: '用户地址', key: 'userAddress', tooltip: true, maxWidth: 300, align: 'center'},
        {title: '身份证号', key: 'userIdentity', tooltip: true, maxWidth: 200, align: 'center'},
        {title: '微信号', key: 'userWechatId', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '微信昵称', key: 'userWechatName', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '创建时间', key: 'userCreatime', tooltip: true, maxWidth: 150, align: 'center'},
        {title: '备注', key: 'userRemark', tooltip: true, maxWidth: 200, align: 'center'},
        {
          title: '状态', key: 'userStatus', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('Button'), {
              attrs: {type: obj.row.userStatus === "1" ? "success" : "error"},
              on: {
                click: () => {
                  that.delUser(obj.row)
                }
              }
            }, obj.row.userStatus === "1" ? "启用" : "禁用")
          }
        },
        {
          title: '编辑', key: 'edit', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('Button'), {
              attrs: {type: "success"}, on: {
                click: () => {
                  that.updateUser(obj.row)
                }
              }
            }, "修改")
          }
        }
      ]
    },
    times(val) {
      this.form.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.form.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    PageChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    search() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadData()
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    loadData() {
      let params = {
        userName: this.form.userName,
        realName: this.form.realName,
        state: this.form.state,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let that = this;
      this.$http.postJson('/user/list', params).then(res => {
        that.total = res.total
        that.tableData = res.data
        that.pageNum = res.pageNum
        that.pageSize = res.pageSize
      })
    },
    add() {
      this.isShowAdd = true
    },
    submitAdd() {
      let that = this;
      that.$http.postJson('/addUser', that.addRow).then(res => {
        that.$Message.success("添加用户成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("添加用户失败")
      })
    },
    updateUser(row) {
      this.isShowUpdate = true
      this.updateRow = row
    },
    submitUpdate() {
      let that = this;
      that.$http.postJson('/updateUser', this.updateRow).then(res => {
        that.$Message.success("更新用户信息成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("更新用户信息失败")
      })
    },
    delUser(row) {
      let that = this;
      row.userStatus = row.userStatus === "1" ? "2" : "1"
      that.$http.postJson('/delUser', row).then(res => {
        that.$Message.success("修改用户状态成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("修改用户状态失败")
      })
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
